<template>
  <!-- 财物出库 -->
  <el-row class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="待出库" name="stockPending"></el-tab-pane>
      <el-tab-pane label="已出库" name="Storage"></el-tab-pane>
    </el-tabs>

    <FormData ref="reference" :pageNum="pageNum" :register="activeName==='stockPending'" :registryStatus="activeName==='stockPending' ? '2' : '3' " :pageSize="pageSize" :buttonName="'批量出库'" @handleQuery="getList" @registerDispose="registerDispose" />

    <el-table ref="filterTable" :row-class-name="tableRowClassName" stripe v-loading="loading" :data="activeName==='stockPending' ? disposalList : disposalList1" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="index">
        <template slot-scope="scope">
          {{scope.row.index+1}}
        </template>
      </el-table-column>
      <el-table-column label="物品名称" align="center" prop="pName">
        <template slot-scope="scope">
          {{scope.row.pName ? scope.row.pName : scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="物品类型" align="center" prop="type">
        <template slot-scope="scope">
          {{propertyTypeReplace(scope.row.type)}}
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" prop="count" />
      <el-table-column label="入库照片" align="center" prop="storeImg" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.storeImg ? scope.row.storeImg : ''" :width="50" :height="50" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="出库照片" align="center" prop="deliverImg" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.deliverImg ? scope.row.deliverImg : ''" :width="50" :height="50" />
        </template>
      </el-table-column> -->
      <el-table-column label="办案人员" align="center" prop="phName" />
      <el-table-column label="登记时间" align="center" prop="registryTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.registryTime ? scope.row.registryTime : scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="updateList(scope.row,false)">修改</el-button>
          <el-button size="mini" type="text" @click="updateList(scope.row,true)">详情</el-button>
          <el-button v-if="activeName==='stockPending'" size="mini" type="text" @click="registerDispose(scope.row.pId)">出库</el-button>
          <el-button v-else size="mini" type="text" @click="deleteDisposalList(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="bottom">
      <pagination v-if="activeName==='stockPending'" v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="paging" />
      <pagination v-else v-show="total1>0" :total="total1" :page.sync="pageNum1" :limit.sync="pageSize1" @pagination="paging1" />
    </div>

    <el-dialog v-bind="$attrs" :visible.sync="dialog" v-on="$listeners" @close="onClose" :title="disabled ?'详情':'修改'">
      <el-form ref="elForm" clearable :model="updateFormData" :disabled="disabled" :rules="rules" size="medium" label-width="100px" label-position="left">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="物品名称" prop="pName">
              <el-input v-model="updateFormData.pName" placeholder="请输入物品名称" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物品类型" prop="type">
              <el-select v-model="updateFormData.type" placeholder="请选择物品类型" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in pTypeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="数量" prop="count">
              <el-input v-model="updateFormData.count" placeholder="请输入数量" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记时间" prop="registryTime">
              <el-date-picker clearable v-model="updateFormData.registryTime" type="date" :style="{width: '100%'}" value-format="yyyy-MM-dd" placeholder="开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="入库图片" prop="storeImg" required>
              <image-upload v-model="updateFormData.storeImg" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="出库图片" prop="deliverImg" required>
              <image-upload v-model="updateFormData.deliverImg" />
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>

  </el-row>
</template>

<script>
import { getPropertyInfo, updatePropertyInfo, deletePropertyInfo } from '@/api/property/propertyList.js'
import { propertyTypeReplace } from '@/utils/characterConversion.js'
import { batchUpdateType } from '@/api/property/registerInfo.js'

export default {
  naem: 'propertyList',
  data () {
    return {
      // 修改弹框是否显示
      dialog: false,
      disabled: false,
      disposalList: [],
      disposalList1: [],
      activeName: 'stockPending',
      updateFormData: {
        // pId: null,
        pName: null,
        type: 1,
        count: null,
        phName: null,
        storeImg: null,
        // deliverImg: null,
        registryTime: null
      },
      rules: {
        registryTime: [{
          required: true,
          message: '请选择日期选择',
          trigger: 'change'
        }],
        pName: [{
          required: true,
          message: '请输入物品名称',

        }],
        type: [{
          required: true,
          message: '请选择物品类型',
          trigger: 'change'
        }],
        count: [{
          required: true,
          message: '请输入数量',

        }],
        peName: [{
          required: true,
          message: '请输入办案人员',

        }],
      },
      pTypeOptions: [{
        "label": "普通物品",
        "value": '1'
      }, {
        "label": "特殊物品",
        "value": '2'
      }, {
        "label": "车辆",
        "value": '3'
      }],
      // 遮罩层
      loading: true,
      // 数据总条数
      total: 0,
      pageSize: 10,
      pageNum: 1,
      total1: 0,
      pageSize1: 10,
      pageNum1: 1
    }
  },
  mounted () {
  },
  methods: {
    // 删除列表
    deleteDisposalList (obj) {
      this.$confirm('确认要删除吗?')
        .then(_ => {
          deletePropertyInfo(obj).then(e => {
            this.$refs.reference.handleQuery()
          })
        })
        .catch(_ => { });
    },
    // 把表格每一行的索引放进 row
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 点击修改列表按钮
    updateList (obj, disabled) {
      this.dialog = true
      this.disabled = disabled
      for (const key in obj) {
        this.updateFormData[key] = obj[key]
      }
    },
    // 关闭修改弹出框
    onClose () {
      this.$refs['elForm'].resetFields()
    },
    close () {
      // this.$emit('update:visible', false)
      this.dialog = false
    },
    // 确认修改列表
    handleConfirm () {
      if (this.disabled) return this.close()
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        updatePropertyInfo(this.updateFormData).then(res => {
          this.getPropertyList()
          this.close()
        })
      })
    },
    // 替换物品类型字段
    propertyTypeReplace,
    // 请求财物信息列表
    async getPropertyList (e) {
      this.loading = true
      await getPropertyInfo({ ...e, rId: this.$route.query.id, registryStatus: '2' }).then(res => {
        this.disposalList = res.rows
        this.total = res.total
      })
      await getPropertyInfo({ ...e, rId: this.$route.query.id, registryStatus: '3' }).then(res => {
        this.disposalList1 = res.rows
        this.total1 = res.total
        console.log(res);
      })
      this.loading = false
    },
    // 入库出库
    registerDispose (id) {
      const list = this.$refs.filterTable.selection
      if (!list.length && !id) return this.$modal.msgWarning("请先选择财物");

      this.$confirm(`确认要出库吗?`)
        .then(_ => {
          let pId = list.map(e => e.pId)

          batchUpdateType(id || pId.join(','), '3').then(res => {
            this.$refs.reference.handleQuery()
          })
        })
        .catch(_ => { });
    },
    /** 查询财物处置列表 */
    getList (e) {
      this.getPropertyList(e)
    },
    // 分页
    paging (e) {
      this.pageNum = e.page
      this.pageSize = e.limit
      this.$nextTick(() => {
        this.$refs.reference.handleQuery()
      })
    },
    paging1 (e) {
      this.pageNum1 = e.page
      this.pageSize1 = e.limit
      this.$nextTick(() => {
        this.$refs.reference.handleQuery()
      })
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.orderId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
